<template>
  <div v-loading="load">
    <el-alert
      v-if="info.num == 0"
      title="警告提示"
      type="error"
      description="短信余额为0，无法自动通知提醒，影响活动报名！请马上购买"
      show-icon
      :closable="false"
      style="margin-bottom:10px;"
    ></el-alert>
    <div class="body-box sms-data">
      <span>短信剩余条数：</span>
      <span>{{info.num}}</span>
      <el-button class="com-btn sms-buy">立即购买</el-button>
    </div>
    <div class="body-box">
      <window-title title="消息通知设置"></window-title>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="message-notice-item">
            <div class="message-notice-left">
              <div>报名提醒</div>
              <div>参与者报名成功后系统自动发送短信通知</div>
            </div>
            <div class="message-notice-line"></div>
            <div class="message-notice-set">
              <div>
                <i class="el-icon-setting message-set-icon" @click="signSet()"></i>
              </div>
              <div
                class="message-notice-state"
                @click="setState(1)"
              >{{info.sign_open ? '点击关闭' : '点击开启'}}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="message-notice-item">
            <div class="message-notice-left">
              <div>审核提醒</div>
              <div>系统自动发送短信通知参与者审核结果</div>
            </div>
            <div class="message-notice-line"></div>
            <div class="message-notice-set">
              <div>
                <i class="el-icon-setting message-set-icon" @click="returnSet()"></i>
              </div>
              <div
                class="message-notice-state"
                @click="setState(2)"
              >{{info.return_open ? '点击关闭' : '点击开启'}}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="message-notice-item">
            <div class="message-notice-left">
              <div>活动提醒</div>
              <div>活动开始前自动提醒参与者，提高到场率</div>
            </div>
            <div class="message-notice-line"></div>
            <div class="message-notice-set">
              <div>
                <i class="el-icon-setting message-set-icon" @click="activeSet()"></i>
              </div>
              <div
                class="message-notice-state"
                @click="setState(3)"
              >{{info.active_open ? '点击关闭' : '点击开启'}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 设置报名提醒模态框 -->
    <el-dialog title="报名提醒设置" width="600px" :visible.sync="sign_model" :destroy-on-close="true" :before-close="handleClose">
      <el-form size="mini" label-position="left" label-width="80px">
        <el-form-item label="是否开启">
          <el-switch v-model="info.sign_open" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
        </el-form-item>
        <el-form-item label="触发条件">参与者报名成功后，自动短信通知活动信息</el-form-item>
        <el-form-item label="短信内容">
          <el-select v-model="info.sign_success" style="width:100%;">
            <el-option v-for="(item,key) in sign_success_arr" :key="key" :value="item" :label="item"  class="sms-select"></el-option>
          </el-select>
          <div style="margin-top:10px;">
            <el-input type="textarea" v-model="info.sign_success" :disabled="true" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" class="com-btn" @click="setState(0)">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 退款提醒设置 -->
    <el-dialog title="审核提醒设置" width="600px" :visible.sync="return_model" :destroy-on-close="true" :before-close="handleClose">
      <el-form size="mini" label-position="left" label-width="80px">
        <el-form-item label="是否开启">
          <el-switch v-model="info.return_open" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
        </el-form-item>
        <el-form-item label="触发条件">对需要审核的报名进行审核处理，自动将审核成功的结果短信通知参与者</el-form-item>
        <el-form-item label="成功通知">
          <el-select v-model="info.return_success" style="width:100%;">
            <el-option v-for="(item,key) in return_success_arr" :key="key" :value="item" :label="item"  class="sms-select"></el-option>
          </el-select>
          <div style="margin-top:10px;">
            <el-input type="textarea" v-model="info.return_success" :disabled="true" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" class="com-btn" @click="setState(0)">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 退款提醒设置 -->
    <el-dialog title="活动提醒设置" width="600px" :visible.sync="active_model" :destroy-on-close="true" :before-close="handleClose">
      <el-form size="mini" label-position="left" label-width="80px">
        <el-form-item label="是否开启">
          <el-switch v-model="info.return_open" active-color="#8a70c6" inactive-color="#e1e1e1"></el-switch>
        </el-form-item>
        <el-form-item label="触发条件">活动开始前<el-input-number size="mini" v-model="info.active_day" :min='1' :max="5"></el-input-number>天，自动短信通知参与者</el-form-item>
        <el-form-item label="成功通知">
          <el-select v-model="info.active_notice" style="width:100%;">
            <el-option v-for="(item,key) in active_notice_arr" :key="key" :value="item" :label="item"  class="sms-select"></el-option>
          </el-select>
          <div style="margin-top:10px;">
            <el-input type="textarea" v-model="info.active_notice" :disabled="true" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" class="com-btn" @click="setState(0)">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";

export default {
  components: { windowTitle },
  data() {
    return {
      info: {},
      sign_model: false,
      return_model : false,
      active_model : false,
      load: true,
      sign_success_arr : [
        '【一块跑】你报名的“{活动名称}”将于{活动开始时间}开始， 活动地址： {活动地址}。你可凭电子票或报名手机号签到入场。',
        '【一块跑】恭喜你，成功报名“{活动名称}”，活动开始时间为：{活动开始时间}， 活动地址为： {活动地址} 。如有疑问，可通过联系主办方。',
        '【一块跑】温馨提示：你已报名“{活动名称}”，活动开始时间：{活动开始时间}，活动地址：{活动地址}。建议你提前规划好行程，准时到场，{跑团名称}期待你的到来。'
      ],
      return_success_arr : [
        '【一块跑】你报名的“{活动名称}”已通过审核。活动开始时间：{活动开始时间}，活动地址：{活动地址}。你可凭电子票或报名手机号签到入场。',
        '【一块跑】恭喜你，你报名的“{活动名称}”已成功通过审核。活动开始时间为：{活动开始时间}，活动地址为：{活动地址} 。如有疑问，可通过联系主办方',
        '【一块跑】温馨提示：你报名的“{活动名称}”已通过审核，活动开始时间：{活动开始时间}，活动地址：{活动地址}。建议你提前规划好行程，准时到场，{跑团名称}期待你的到来。'
      ],
      active_notice_arr : [
        '【一块跑】你报名的“{活动名称}”，将于 {活动开始时间} 开始，活动地址：{活动地址}，请提前规划好路线，准时到场！你可凭电子票或报名手机号签到入场。',
        '【一块跑】嗨，{参与者姓名}，你报名的“{活动名称}”，将于 {活动开始时间} 开始，活动地址为：{活动地址} 。如有疑问，可通过联系主办方',
        '【一块跑】温馨提示：你报名的“{活动名称}”，将于 {活动开始时间} 开始， 活动地址： {活动地址}。建议你提前规划好行程，准时到场，{跑团名称}期待你的到来。'
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //活动提醒
    activeSet(){
      this.active_model = true;
    },
    //退款提醒
    returnSet(){
      this.return_model = true;
    },
    //关闭
    handleClose(){
      this.getData();
    },
    //报名提醒设置
    signSet() {
      this.sign_model = true;
    },
    //获取短信配置参数
    getData() {
      this.load = true;
      this.ajaxs("message/getSmsParam", {
        success: res => {
          this.info = res.msg;
          this.load = false;
          this.return_model = false;
          this.sign_model = false;
          this.active_model = false;
        }
      });
    },
    //开启关闭短信提示
    setState(param) {
      var data = JSON.parse(JSON.stringify(this.info));
      switch (param) {
        case 1:
          data.sign_open = !this.info.sign_open;
          break;
        case 2:
          data.return_open = !this.info.return_open;
          break;
        case 3:
          data.active_open = !this.info.active_open;
          break;
      }
      this.ajaxs("message/setSmsState", {
        data: data,
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.sign_model = false;
            this.return_model = false;
            this.active_model = false;
            //this.getData();
          }
        }
      });
    }
  }
};
</script>

<style>
.sms-select{
  width: 480px !important;
  white-space: normal !important;
  height: auto !important;
}
.message-notice-state {
  color: #8a70c6;
  margin-top: 20px;
  cursor: pointer;
}
.message-set-icon {
  font-size: 22px;
  margin-top: 10px;
  color: #999;
  cursor: pointer;
}
.message-set-icon:hover {
  color: #8a70c6;
}
.message-notice-set {
  float: right;
  width: 60px;
  text-align: center;
}
.message-notice-line {
  position: absolute;
  width: 1px;
  height: 60px;
  top: 20px;
  right: 80px;
  background: #ccc;
}
.message-notice-left {
  float: left;
  width: calc(100% - 80px);
}
.message-notice-left > div:first-child {
  font-size: 16px;
}
.message-notice-left > div:last-child {
  color: #999;
  margin-top: 10px;
}
.message-notice-item {
  width: 100%;
  height: 100px;
  background: #f8f8f8;
  margin-top: 20px;
  overflow: hidden;
  padding: 10px;
  position: relative;
}
.sms-buy {
  float: right;
}
.sms-data {
  height: 80px;
  line-height: 40px;
  overflow: hidden;
}
.sms-data > span {
  float: left;
}
.sms-data > span:first-child {
  color: #666;
}
.sms-inpu {
  width: 50px;
  height: 26px;
  margin: 0 10px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  text-align: center;
}
.sms-inpu:focus {
  outline: none;
}
</style>